<template>
  <div class="app-container">
    <el-form ref="formDialog" :model="form" :rules="rules" label-width="80px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px; color: #1890ff">工法发布列表</span>
        </div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddQygfgbGffblb">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteQygfgbGffblb">删除
            </el-button>
          </el-col>
        </el-row>
        <el-table height="40vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                  :data="qygfgbGffblbList" :row-class-name="rowQygfgbGffblbIndex"
                  @selection-change="handleQygfgbGffblbSelectionChange" ref="qygfgbGffblb">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="年度" align="center" prop="nd" width="150"/>
          <el-table-column label="工法名称" align="center" prop="gfName">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleButtonClick(scope.row)"
              >
                <el-link type="primary">{{ scope.row.gfName }}</el-link>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="申报级别" align="center" prop="sbJb"/>
          <el-table-column label="工法类别" align="center" prop="gfLb"/>
          <el-table-column label="申报单位" align="center" prop="sbDw"/>
          <el-table-column v-if="1 === 2" label="企业工法ID" align="center" prop="qygfId"/>
        </el-table>
      </el-card>

      <br>
      <el-card class="box-card">
        <el-form-item label="审核时间" prop="shTime">
          <el-date-picker clearable
                          v-model="form.shTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择审核时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核意见" prop="shYj">
          <el-input :rows="5" v-model="form.shYj" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-card>
    </el-form>
    <br>
    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button size="medium" type="primary" @click="submitForm">公 布</el-button>
      <el-button size="medium" type="primary" @click="submitFormWTg">未 通 过</el-button>
      <el-button size="medium" @click="cancel">重 置</el-button>
    </div>

    <!-- 企业工法多选组件 -->
    <QyGfDuoX ref="qyGfDuoXuan"/>

    <!-- 企业工法详情 -->
    <QyGfXq ref="qyGfXq"/>
  </div>
</template>

<script>
import {addQygfgb, insertPsWTg} from "@/api/kjcg/qygfgb";
import {formatFileSize, getCurrentDate, handleUploadError, renderContent} from "@/utils/huacai";
import QyGfDuoX from "@/views/components/qygfXz/QyGfDuoX.vue";
import QyGfXq from "@/views/kjcg/qygfsb/components/QyGfXq.vue";

export default {
  name: "qygfgb", //企业工法公布
  components: {QyGfXq, QyGfDuoX},
  provide() {
    return {
      //赋值给 工法公布列表
      updateQyGfLabel: (val) => {
        val.forEach(item => {
          // 检查是否已存在相同的 qygfId
          const exists = this.qygfgbGffblbList.some(existingItem => existingItem.qygfId === item.qygfId);
          if (!exists) {
            this.qygfgbGffblbList.push(item);
          }
        })
      },
    };
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        shTime: [{required: true, message: "审核时间不能为空", trigger: "blur"}],
      },
      // 工法发布列表格数据
      qygfgbGffblbList: [],
    }
  },
  created() {
    this.reset()
  },
  methods: {
    //打开企业工法详情
    handleButtonClick(row) {
      this.$refs.qyGfXq.handleOpen(row);
    },
    // 表单重置
    reset() {
      this.form = {
        qygfgbId: null,
        shTime: getCurrentDate(),
        shYj: null,
        idWhere: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        userId: null,
        deptId: null
      };
      this.qygfgbGffblbList = [];
      this.resetForm("formDialog");
    },
    /** 工法发布列添加按钮操作 */
    handleAddQygfgbGffblb() {
      this.$refs.qyGfDuoXuan.handleOpen(this.qygfgbGffblbList);
      // let obj = {};
      // obj.nd = "";
      // obj.gfName = "";
      // obj.sbJb = "";
      // obj.gfLb = "";
      // obj.sbDw = "";
      // obj.qygfId = "";
      // this.qygfgbGffblbList.push(obj);
    },
    /** 工法发布列删除按钮操作 */
    handleDeleteQygfgbGffblb() {
      if (this.checkedQygfgbGffblb.length == 0) {
        this.$modal.msgError("请先选择要删除的工法发布列数据");
      } else {
        const qygfgbGffblbList = this.qygfgbGffblbList;
        const checkedQygfgbGffblb = this.checkedQygfgbGffblb;
        this.qygfgbGffblbList = qygfgbGffblbList.filter(function (item) {
          return checkedQygfgbGffblb.indexOf(item.index) == -1
        });
      }
    },
    /** 公布按钮 */
    submitForm() {
      this.$refs["formDialog"].validate(valid => {
        if (valid) {
          this.form.qygfgbGffblbList = this.qygfgbGffblbList;
          addQygfgb(this.form).then(response => {
            this.$modal.msgSuccess("公布成功");
            this.reset() //公布完成后重置表单
          });
        }
      });
    },
    /** 未通过按钮 */
    submitFormWTg() {
      this.$refs["formDialog"].validate(valid => {
        if (valid) {
          this.form.qygfgbGffblbList = this.qygfgbGffblbList;
          insertPsWTg(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.reset() //操作未通过完成后重置表单
          });
        }
      });
    },
    /** 工法发布列序号 */
    rowQygfgbGffblbIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },
    /** 复选框选中数据 */
    handleQygfgbGffblbSelectionChange(selection) {
      this.checkedQygfgbGffblb = selection.map(item => item.index)
    },
    // 重置
    cancel() {
      this.reset();
    },

  }
}
</script>

<style scoped>

</style>
